define([
        'jquery', 'lib/snap.svg'
], function($,Snap){
		
	function SlideEditorView() {
		
		this.svgURL = 'http://www.w3.org/2000/svg';
		this.mainController = null;
		this.slideEditorController = null;
		this.slideSVG = null;
		this.selectedShape = null;
		this.drawGuideLine = null;
		this.shapeTemp = null;
		this.groupTemp = null;
		this.controlBox = null;
		this.controlPoint = [];
		this.widthTemp = 0;
		this.heightTemp = 0;
		this.bWidth = 0;
		this.bHeight = 0;
		this.svgWidth = 0;
		this.svgHeight = 0;
	};
	
	SlideEditorView.prototype = {
			
			setController : function(controller) {
				this.mainController = controller;
				this.slideEditorController = this.mainController.getSlideEditorController();
			},
			
			doRender : function(slideList) {
				
				this.bWidth = $(document).width();
				this.bHeight = $(document).height();
				
				var containerDiv = $('#container');
				var slideEditorDiv = $('<div></div>').attr({id: "slide_editor"}).css({width: this.bWidth-(221)+'px'}); //占쎌꼷��
				var workSpaceDiv = $('<div></div>').attr({id: "workspace"}).css({height: this.bHeight-(67+102)+'px'});
				var slideMemoBarDiv = $('<div></div>').attr({id: "slide_memo_bar"});
				var slideMemoDiv = $('<div></div>').attr({id: "slide_memo"});
				
				var slideSvg = $(document.createElementNS(this.svgURL, "svg")).attr({id: "slide_svg"});
				//var innerGTag = $(document.createElementNS(this.svgURL, "g")).attr({id: "editor_g"});
				
				workSpaceDiv.append(slideSvg);
				slideEditorDiv.append(workSpaceDiv);
				slideEditorDiv.append(slideMemoBarDiv);
				slideEditorDiv.append(slideMemoDiv);
				containerDiv.append(slideEditorDiv);
				
				var controllerTemp = this.slideEditorController;
				
				$(document).bind(
						'keyup',
						function(event) {
							if (event.keyCode == '46') {
								console.log(controllerTemp.slideList.length);
								
								//var contentList = controllerTemp.slideList[i].
								
								for(var i = 0; i < controllerTemp.slideList.length; i++) {
									if(controllerTemp.slideList[i] === controllerTemp.selectedShape) {
										//console.log('olleh!!');
									}
								}
							}
						}
					);
				
				
				this.initSlideSVG();
				this.calcSlideSize();
				
				/*var _this = this;
				window.onresize = function() {
					_this.resizeSlide(_this);
				};*/
			},
			
			
			
			calcSlideSize : function() {
				//현재 해상도의 최대 화면 사이즈 
				var maxWidth = parseInt(window.screen.width * 0.7);
				var maxHeight = parseInt(window.screen.height * 0.68);
				
				//this.slideSVG = 
				
				return {'maxWidth' : maxWidth, 'maxHeight' : maxHeight }; 
			},
			
			
			//1384x778
			/*resizeSlide : function(_this) {
				
				//현재 브라우저 사이즈
				var curWidth = parseInt(window.innerWidth)-220;
				var curHeight = parseInt(window.innerHeight)-169;
				var widthRate = 1+(1-(_this.svgWidth / curWidth));
				var svgRect = $('rect[id^=workSlide]');
				//console.log(svgRect);
				
				this.slideSVG.attr({
					'style' : 'width:' + curWidth + '; height:' + curHeight + ';'
				});
				
				svgRect.attr({
					'transform' : 'scale(' + widthRate + ')'
				});
				
				_this.svgWidth = curWidth;
				_this.svgHeight = curHeight;
			},*/
			

			
			initSlideSVG : function() {
				this.slideSVG = Snap('#slide_svg');
				this.svgWidth = parseInt(window.innerWidth)-220;
				this.svgHeight = parseInt(window.innerHeight)-169;
				
				this.slideSVG.attr({
					'style' : 'width:' + this.svgWidth + '; height:' + this.svgHeight + ';'
				});
				
				var sSize = this.calcSlideSize();
				var sWidth = sSize.maxWidth;
				var sHeight = sSize.maxHeight;
				
				var workSlide = this.slideSVG.rect(50,50,sWidth, sHeight);
				
				workSlide.attr({
					"id": "workSlide1", 
					"fill" : "#ffffff"
				});
				
				this.slideSVG.drag(
						$.proxy(this.handleDrawDrag, this), 
						$.proxy(this.handleDrawStart, this),
						$.proxy(this.handleDrawEnd, this)
				);
				
				this.controlBox = this.slideSVG.path();
				this.controlBox.attr('id', 'controlBox');
				
				for(var i = 0; i < 8; i++) {
					this.controlPoint[i] = this.slideSVG.path();
					this.controlPoint[i].attr('class', 'controlPoint');
				}
				
				workSlide.click(
					$.proxy(
						this.slideEditorController.setSelectedContent,
						this.slideEditorController
					)
				);
			},
			
			drawWorkSlide: function(contentList) {
				var paper2 = new Snap('#slide_svg');
				
				var workSlide = paper2.rect(50,50,1280,730);
				this.controlBox = paper2.path();
				
				for(var i = 0; i < 8; i++) {
					this.controlPoint[i] = paper2.path();
				}
				
				workSlide.attr({
					"id": "workSlide"+this.mainController.currentSlideNum,
					"fill" : "#ffffff"
				});
				
				workSlide.click(
					$.proxy(
						this.slideEditorController.setSelectedContent,
						this.slideEditorController
					)
				);
				
				for(var i = 0; i < contentList.length; i++) {
					paper2.append(contentList[i]);
				}
				
				this.controlBox = paper2.path();
				this.controlBox.attr('id', 'controlBox');
				
				for(var i = 0; i < 8; i++) {
					this.controlPoint[i] = this.slideSVG.path();
					this.controlPoint[i].attr('class', 'controlPoint');
				}
			},
			
			drawShowBtnBox : function() {
				var showBtnBox = $('<div></div>').attr({id: 'showBtnBox'});
				var previousBtn = $('<input></input').attr({id: 'previous', type: "button", value: "이전으로"});
				var nextBtn = $('<input></input').attr({id : 'next', type: "button", value: "다음으로"});
				showBtnBox.append(previousBtn).append(nextBtn);
				$('#workspace').append(showBtnBox);
				
				nextBtn.click(
					$.proxy(
						this.slideEditorController.showModeBtnClick,
						this.slideEditorController
					)
				);
				
				previousBtn.click(
					$.proxy(
						this.slideEditorController.showModeBtnClick,
						this.slideEditorController
					)
				);
			},
			
		
			drawControlBox : function(selectedContent, controlBox) {				
				for(var i = 0; i < 8; i++) {
					this.controlPoint[i].attr('style', 'display:block;');
				}
				
				var x = controlBox.getCoordinate().x-1;
				var y = controlBox.getCoordinate().y-1; 
				var width = controlBox.getSize().width+1;
				var height = controlBox.getSize().height+1;
				
				var boxPath = [
				               'M' + (x)+ ',' +(y)+
				               'L'+ (x+width) + ',' + (y) +
				               'L'+ (x+width) + ',' +(y+height) +
				               'L'+ (x) + ','+ (y+height) +
				               'L'+ (x) + ','+ (y) + 'Z'
				];
				
				this.controlBox.attr({
					'path' : boxPath,
					'fill' : '#000000', 
					'fill-opacity' : '0',
					'stroke' : '#A2BEE0',
					'stroke-width' : '1'
				});
				
				var pointX = x-4;
				var pointY = y-4;
				var dX = width/2;
				var dY = height/2;
				
				for(var i = 0; i < 8; i++) {					
					//
					if(i == 0) {
						this.controlPoint[i].attr({'path' : 
							'M' + (pointX)+ ',' +(pointY)+ 'L'+ (pointX + 8) + ',' + (pointY) +
				            'L'+ (pointX + 8) + ',' +(pointY + 8) + 'L'+ (pointX) + ','+ (pointY + 8) +
				            'L'+ (pointX) + ','+ (pointY) + 'Z',
						});
					}
					else if(i == 1) {
						pointX += dX;
						this.controlPoint[i].attr({'path' : 
							'M' + (pointX)+ ',' +(pointY)+ 'L'+ (pointX + 8) + ',' + (pointY) +
				            'L'+ (pointX + 8) + ',' +(pointY + 8) + 'L'+ (pointX) + ','+ (pointY + 8) +
				            'L'+ (pointX) + ','+ (pointY) + 'Z',
						});
					}
					else if(i == 2) {
						pointX += dX;
						this.controlPoint[i].attr({'path' : 
							'M' + (pointX)+ ',' +(pointY)+ 'L'+ (pointX + 8) + ',' + (pointY) +
				            'L'+ (pointX + 8) + ',' +(pointY + 8) + 'L'+ (pointX) + ','+ (pointY + 8) +
				            'L'+ (pointX) + ','+ (pointY) + 'Z',
						});
					}
					else if(i == 3) {
						pointX = x-4;
						pointY += (dY + 4);
						this.controlPoint[i].attr({'path' : 
							'M' + (pointX)+ ',' +(pointY)+ 'L'+ (pointX + 8) + ',' + (pointY) +
				            'L'+ (pointX + 8) + ',' +(pointY + 8) + 'L'+ (pointX) + ','+ (pointY + 8) +
				            'L'+ (pointX) + ','+ (pointY) + 'Z',
						});
					}
					else if(i == 4) {
						pointX += (dX * 2);
						this.controlPoint[i].attr({'path' : 
							'M' + (pointX)+ ',' +(pointY)+ 'L'+ (pointX + 8) + ',' + (pointY) +
				            'L'+ (pointX + 8) + ',' +(pointY + 8) + 'L'+ (pointX) + ','+ (pointY + 8) +
				            'L'+ (pointX) + ','+ (pointY) + 'Z',
						});
					}
					else if(i == 5) {
						pointX = x - 4;
						pointY = (y - 4) + (dY * 2);
						this.controlPoint[i].attr({'path' : 
							'M' + (pointX)+ ',' +(pointY)+ 'L'+ (pointX + 8) + ',' + (pointY) +
				            'L'+ (pointX + 8) + ',' +(pointY + 8) + 'L'+ (pointX) + ','+ (pointY + 8) +
				            'L'+ (pointX) + ','+ (pointY) + 'Z',
						});
					}
					else if(i == 6) {
						pointX += dX;
						this.controlPoint[i].attr({'path' : 
							'M' + (pointX)+ ',' +(pointY)+ 'L'+ (pointX + 8) + ',' + (pointY) +
				            'L'+ (pointX + 8) + ',' +(pointY + 8) + 'L'+ (pointX) + ','+ (pointY + 8) +
				            'L'+ (pointX) + ','+ (pointY) + 'Z',
						});
					}
					else if(i == 7) {
						pointX += dX;
						this.controlPoint[i].attr({'path' : 
							'M' + (pointX)+ ',' +(pointY)+ 'L'+ (pointX + 8) + ',' + (pointY) +
				            'L'+ (pointX + 8) + ',' +(pointY + 8) + 'L'+ (pointX) + ','+ (pointY + 8) +
				            'L'+ (pointX) + ','+ (pointY) + 'Z',
						});
					}
					
					this.controlPoint[i].attr({
						 'fill' : '#A2BEE0', 
						 'fill-opacity' : '100',
						 'stroke' : '#000000',
						 'stroke-width' : '1'
					});
				}
				
				this.controlPoint[7].drag(
						$.proxy(this.handlePointDrag, this),
						$.proxy(this.handlePointGrab, this), 
						$.proxy(this.handlePointDrop, this)
				);
				
				if(selectedContent === null) {
					//console.log('hide');
					this.controlBox.attr('style', 'display:none;');
				
					for(var i = 0; i < 8; i++) {
						this.controlPoint[i].attr('style', 'display:none;');
					}
				}
			},
			
			
			/* ****140318 **** */
			drawFillColor : function(color, selectedContent) {
				$(selectedContent).attr('fill', color);
			},
			
			
			drawFillOpacity : function(value, selectedContent) {
				$(selectedContent).attr('opacity', value/100);
			},
			
			
			drawStrokeColor : function(color, selectedContent) {
				$(selectedContent).attr('stroke', color);
			},
			
			
			drawStrokeStyle : function(value, selectedContent) {
				if(value === 'line') {
					$(selectedContent).attr('stroke-dasharray', '');
				}
				else {
					$(selectedContent).attr('stroke-dasharray', value);
				}
			},
			
			
			drawStrokeWidth : function(value, selectedContent) {
				$(selectedContent).attr('stroke-width', value);
			},
			
			
			//도형을 그리기 위한 드래그앤 드롭 시 처리하는 메소드
			//드래그 시작 : handleDrawStart
			//드래그 중 : handleDrawDrag
			//드롭시 : handleDrawEnd
			handleDrawStart : function(x, y, evnet) {
				var slideEditorController = this.mainController.getSlideEditorController();
				var drawMode = slideEditorController.getDrawMode();
				var drawType = slideEditorController.getDrawType();
				
				if(drawMode === true) {
					this.clientX = x;
					this.clientY = y;
				
					if(drawType === 'circle') {
						this.shapeTemp = this.slideSVG.ellipse(this.clientX-220, this.clientY-100, 0, 0);
						this.shapeTemp.attr({
							'fill' : '#4F81BD', 
							'fill-opacity' : '20',
							'stroke' : '#263E5B'
						});
					}
					/*else if(drawType === 'rect') {
						this.shapeTemp = this.slideSVG.rect(this.clientX-220, this.clientY-100, 0, 0);
						this.shapeTemp.attr({
							'fill' : '#4F81BD', 
							'fill-opacity' : '20',
							'stroke' : '#263E5B',
						});
					}*/
					else {
						this.shapeTemp = this.slideSVG.path();
						this.shapeTemp.attr({
							'fill' : '#4F81BD', 
							'fill-opacity' : '20',
							'stroke' : '#263E5B',
						});
					}					
				
					if(this.drawGuideLine === null) {
						this.drawGuideLine = this.slideSVG.rect(this.clientX-220, this.clientY-100, 0, 0);
						this.drawGuideLine.attr({
							'fill' : '#fff', 
							'fill-opacity' : '0', 
							'stroke' : 'blue', 
							'stroke-width' : '1'
						});
				
						this.drawGuideLine.widthTemp = parseInt(this.drawGuideLine.attr('width'));
						this.drawGuideLine.heightTemp = parseInt(this.drawGuideLine.attr('height'));
					}
					else {
						this.drawGuideLine.attr({
							'x' : this.clientX-220,
							'y' : this.clientY-100
						});
					}
				
					//새로 추가된 도형에 이벤트 추가
					this.shapeTemp.drag(
							$.proxy(this.handleShapeDrag, this),
							$.proxy(this.handleShapeGrab, this),
							$.proxy(this.handleShapeDrop, this)
					);
					this.shapeTemp.click(
							$.proxy(
									this.slideEditorController.setSelectedContent,
									this.slideEditorController
							)
					);
				}
			},
			
			
			handleDrawDrag : function(x, y, event) {
				var slideEditorController = this.mainController.getSlideEditorController();
				var drawMode = slideEditorController.getDrawMode();
				var drawType = slideEditorController.getDrawType();
				var gx = Math.abs(parseInt(this.drawGuideLine.attr('x')));	//가이드라인 X좌표
				var gy = Math.abs(parseInt(this.drawGuideLine.attr('y')));	//가이드라인 Y좌표
				var gWidth = parseInt(this.drawGuideLine.attr('width'));	//가이드라인 너비
				var gHeight = parseInt(this.drawGuideLine.attr('height'));	//가이드라인 높이
				
				if(drawMode === true) {
					this.drawGuideLine.attr({
						'width' :  parseInt(this.drawGuideLine.widthTemp + x), 
						'height' :  parseInt(this.drawGuideLine.heightTemp + y)
					});
					
					if(drawType === 'circle') {
						var hRadius = parseInt(this.drawGuideLine.attr('width'))/2;
						var vRadius = parseInt(this.drawGuideLine.attr('height'))/2;
						
						this.shapeTemp.attr({
							'cx' : this.clientX + hRadius - 220,
							'cy' : this.clientY + vRadius - 100,
							'rx' : hRadius,
							'ry' : vRadius,
						});
					}
					else if(drawType === 'rect') {
						this.shapeTemp.attr({
							'class' : 'rect',
							'path' :
							'M' + (gx) + ',' + (gy) +
							'L' + (gx+gWidth) + ',' + (gy) +
							'L' + (gx+gWidth) + ',' + (gy+gHeight) +
							'L' + (gx) + ',' + (gy+gHeight) +
							'L' + (gx) + ',' + (gy) + 'Z'
						});
					}
					else if(drawType === 'triangle') {
						var gWidthCenter = (gWidth)/2;	//가이드라인 너비의 중간지점
						this.shapeTemp.attr({
							'class' : 'triangle',
							'path' : 
							'M' + (gx) + ',' + (gy+gHeight) + 
							'L' + (gx+gWidthCenter) + ',' + (gy) +
							'L' + (gx+gWidth) + ',' + (gy+gHeight) +
							'L' + (gx) + ',' + (gy+gHeight) + 'Z'
						});
					}
					else if(drawType === 'pentagon') {
						var gWidthCenter = (gWidth)/2;	
						var gWidth1_5 = (gWidth)/5;		//가이드라인 너비의 1/5 크기
						var gHeight1_5 = (gHeight)/5;		//가이드라인 높이의 1/5 크기
						this.shapeTemp.attr({
							'class' : 'pentagon',
							'path' : 
							'M' + (gx) + ',' + (gy+gHeight1_5*2) + 
							'L' + (gx+gWidthCenter) + ',' + (gy) +
							'L' + (gx+gWidth) + ',' + (gy+gHeight1_5*2) +
							'L' + (gx+(gWidth1_5*4)) + ',' + (gy+gHeight) +
							'L' + (gx+gWidth1_5) + ',' + (gy+gHeight) + 
							'L' + (gx) + ',' + (gy+gHeight1_5*2) + 'Z'
						});
					}
					else if(drawType === 'hexagon') {
						var gWidth1_4 = (gWidth)/4;		//가이드라인 너비의 1/4 크기
						var gHeight1_2 = (gHeight)/2;		//가이드라인 높이의 1/2 크기
						
						this.shapeTemp.attr({
							'class' : 'hexagon',
							'path' : 
							'M' + (gx+gWidth1_4) + ',' + (gy) + 
							'L' + (gx+(gWidth1_4*3)) + ',' + (gy) +
							'L' + (gx+gWidth) + ',' + (gy+gHeight1_2) +
							'L' + (gx+(gWidth1_4*3)) + ',' + (gy+gHeight) +
							'L' + (gx+gWidth1_4) + ',' + (gy+gHeight) + 
							'L' + (gx) + ',' + (gy+gHeight1_2) + 
							'L' + (gx+gWidth1_4) + ',' + (gy) +	'Z'
						});
					}
				}
			},
			
			handleDrawEnd : function() {
				var drawMode = this.slideEditorController.getDrawMode();
				
				if(drawMode === true) {
					if(this.drawGuideLine !== null) {
						this.drawGuideLine.attr({
							'x' : '0',
							'y' : '0',
							'width' : '0',
							'height' : '0'
						});
					}
				
					//생성된 도형 정보를 바탕으로 content객체 생성을 위해 컨트롤러의 메소드 호출
					this.slideEditorController.createContent(this.shapeTemp);
					this.slideEditorController.setDrawMode(false);
					this.shapeTemp = null;
					
					this.modifyThumbnailView();
				}
			},
			
			
			
			
			//도형 드래그앤 드롭시 이동하는 메서드
			//드래그 시작 : handleShapeGrab
			//드래그 중 : handleShapeDrag
			//드랍시 : handleShapeDrop
			handleShapeGrab : function(x, y, event) {
				this.controlBox.attr('style', 'display:none;');
				for(var i = 0; i < 8; i++) {
					this.controlPoint[i].attr('style', 'display:none;');
				}
				
				var target = event.target;
				var shapeType = target.tagName;
	            
	            if(shapeType === 'ellipse') {
	            	target.shapeX = parseInt($(target).attr('cx'));
	            	target.shapeY = parseInt($(target).attr('cy'));
				}
				else if(shapeType === 'rect') {
					if(target.id.indexOf('workSlide') < 0) {
						target.shapeX = parseInt($(target).attr('x'));
						target.shapeY = parseInt($(target).attr('y'));
					}
				}
				else {
					target.cx =  target.getBoundingClientRect().left-220;
					target.cy =  target.getBoundingClientRect().top-100;
					target.w = target.getBoundingClientRect().width;
					target.h = target.getBoundingClientRect().height;
					target.wDivide2 = target.w/2;
				}
			},

			handleShapeDrag : function(moveX, moveY, clientX, clientY, event) {
				var target = event.target;
				var shapeType = target.tagName;
				
				
				if(shapeType === 'ellipse') {
					
					$(target).attr({
						'cx':  target.shapeX + moveX, 
						'cy':  target.shapeY + moveY,
					});
				}
				else if($(target).attr('class') === 'rect') {
					if(target.id.indexOf('workSlide') < 0) {
						$(target).attr({
							'x':  target.shapeX + moveX, 
							'y':  target.shapeY + moveY,
						});
					}
				}				
				
				if($(target).attr('class') === 'triangle') {											
					$(target).attr({
						'd' : 
						'M' + (target.cx+moveX) + ',' + (target.cy+target.h+moveY) + 
						'L' + (target.cx+target.wDivide2+moveX) + ',' + (target.cy+moveY) +
						'L' + (target.cx+target.w+moveX) + ',' + (target.cy+target.h+moveY) +
						'L' + (target.cx+moveX) + ',' + (target.cy+target.h+moveY) + 'Z'
					});
				}
				else if($(target).attr('class') === 'pentagon') {
					var cWidth1_5 = target.w/5;		//컨트롤박스 너비의 1/5 크기
					var cHeight1_5 = target.h/5;		//컨트롤박스 높이의 1/5 크기
					
					$(target).attr({
						'd' : 
						'M' + (target.cx+moveX) + ',' + (target.cy+cHeight1_5*2+moveY) + 
						'L' + (target.cx+target.wDivide2+moveX) + ',' + (target.cy+moveY) +
						'L' + (target.cx+target.w+moveX) + ',' + (target.cy+cHeight1_5*2+moveY) +
						'L' + (target.cx+(cWidth1_5*4)+moveX) + ',' + (target.cy+target.h+moveY) +
						'L' + (target.cx+cWidth1_5+moveX) + ',' + (target.cy+target.h+moveY) + 
						'L' + (target.cx+moveX) + ',' + (target.cy+cHeight1_5*2+moveY) + 'Z'
					});
				}
				else if($(target).attr('class') === 'hexagon') {	
					var cWidth1_4 = target.w/4;		//가이드라인 너비의 1/4 크기
					var cHeight1_2 = target.h/2;		//가이드라인 높이의 1/2 크기
					
					$(target).attr({
						'd' : 
						'M' + (target.cx+cWidth1_4+moveX) + ',' + (target.cy+moveY) + 
						'L' + (target.cx+(cWidth1_4*3)+moveX) + ',' + (target.cy+moveY) +
						'L' + (target.cx+target.w+moveX) + ',' + (target.cy+cHeight1_2+moveY) +
						'L' + (target.cx+(cWidth1_4*3)+moveX) + ',' + (target.cy+target.h+moveY) +
						'L' + (target.cx+cWidth1_4+moveX) + ',' + (target.cy+target.h+moveY) + 
						'L' + (target.cx+moveX) + ',' + (target.cy+cHeight1_2+moveY) + 
						'L' + (target.cx+cWidth1_4+moveX) + ',' + (target.cy+moveY) +	'Z'
					});
				}
			},
			
			
			handleShapeDrop : function(event) {
				var target = event.target;
				var shapeType = target.tagName;
	            
	            if(shapeType === 'ellipse') {
	            	target.shapeX = parseInt($(target).attr('cx'));
	            	target.shapeY = parseInt($(target).attr('cy'));
				}
	            else if($(target).attr('class') === 'rect') {
	            	//슬라이드 배경이 선택된 경우
	            	if(target.id.indexOf('workSlide') >= 0) {
					}
					else {
						target.shapeX = parseInt($(target).attr('x'));
						target.shapeY = parseInt($(target).attr('y'));
					}
				}
	            
	            this.controlBox.attr('style', 'display:block;');
				for(var i = 0; i < 8; i++) {
					this.controlPoint[i].attr('style', 'display:block;');
				}
				
				this.modifyThumbnailView();
			},
			
			

			
			//도형 리사이징을 위해 컨트롤 포인트를 드래그앤 드롭처리하는 메서드
			//드래그 시작 : handlePointGrab
			//드래그 중 : handlePointDrag
			//드랍시 : handlePointDrop
			handlePointGrab : function(x, y, event) {
				var slideEditorController = this.mainController.getSlideEditorController();
				var controlBoxObj = slideEditorController.getControlBoxObj();
				
				this.widthTemp = parseInt(controlBoxObj.getSize().width);
				this.heightTemp = parseInt(controlBoxObj.getSize().height);
				
				this.clientX = x;
				this.clientY = y;
			},
			
			handlePointDrag : function(x, y, event) {
				var slideEditorController = this.mainController.getSlideEditorController();
				var controlBoxObj = slideEditorController.getControlBoxObj();
				var selectedContent = slideEditorController.getSelectedShape();				
				var newWidth = this.widthTemp + parseInt(x);
				var newHeight = this.heightTemp + parseInt(y);
				
				controlBoxObj.setSize(parseInt(newWidth), parseInt(newHeight));
				
				//컨트롤박스의 좌표와 너비, 높이
				var cbX = controlBoxObj.getCoordinate().x-1;
				var cbY = controlBoxObj.getCoordinate().y-1; 
				var width = newWidth+1;
				var height = newHeight+1;
				
				var boxPath = [
				               'M' + (cbX)+ ',' +(cbY)+
				               'L'+ (cbX+width) + ',' + (cbY) +
				               'L'+ (cbX+width) + ',' +(cbY+height) +
				               'L'+ (cbX) + ','+ (cbY+height) +
				               'L'+ (cbX) + ','+ (cbY) + 'Z'
				];
				this.controlBox.attr({
					'path' : boxPath,
					'fill' : '#000000', 
					'fill-opacity' : '0',
					'stroke' : '#A2BEE0',
					'stroke-width' : '1'
				});
				
				var pointX = cbX-4;
				var pointY = cbY-4;
				var dX = width/2;
				var dY = height/2;
				
				//
				for(var i = 0; i < 8; i++) {					
					//
					if(i == 0) {
						this.controlPoint[i].attr({'path' : 
							'M' + (pointX)+ ',' +(pointY)+ 'L'+ (pointX + 8) + ',' + (pointY) +
				            'L'+ (pointX + 8) + ',' +(pointY + 8) + 'L'+ (pointX) + ','+ (pointY + 8) +
				            'L'+ (pointX) + ','+ (pointY) + 'Z',
						});
					}
					else if(i == 1) {
						pointX += dX;
						this.controlPoint[i].attr({'path' : 
							'M' + (pointX)+ ',' +(pointY)+ 'L'+ (pointX + 8) + ',' + (pointY) +
				            'L'+ (pointX + 8) + ',' +(pointY + 8) + 'L'+ (pointX) + ','+ (pointY + 8) +
				            'L'+ (pointX) + ','+ (pointY) + 'Z',
						});
					}
					else if(i == 2) {
						pointX += dX;
						this.controlPoint[i].attr({'path' : 
							'M' + (pointX)+ ',' +(pointY)+ 'L'+ (pointX + 8) + ',' + (pointY) +
				            'L'+ (pointX + 8) + ',' +(pointY + 8) + 'L'+ (pointX) + ','+ (pointY + 8) +
				            'L'+ (pointX) + ','+ (pointY) + 'Z',
						});
					}
					else if(i == 3) {
						pointX = cbX-4;
						pointY += (dY + 4);
						this.controlPoint[i].attr({'path' : 
							'M' + (pointX)+ ',' +(pointY)+ 'L'+ (pointX + 8) + ',' + (pointY) +
				            'L'+ (pointX + 8) + ',' +(pointY + 8) + 'L'+ (pointX) + ','+ (pointY + 8) +
				            'L'+ (pointX) + ','+ (pointY) + 'Z',
						});
					}
					else if(i == 4) {
						pointX += (dX * 2);
						this.controlPoint[i].attr({'path' : 
							'M' + (pointX)+ ',' +(pointY)+ 'L'+ (pointX + 8) + ',' + (pointY) +
				            'L'+ (pointX + 8) + ',' +(pointY + 8) + 'L'+ (pointX) + ','+ (pointY + 8) +
				            'L'+ (pointX) + ','+ (pointY) + 'Z',
						});
					}
					else if(i == 5) {
						pointX = cbX - 4;
						pointY = (cbY - 4) + (dY * 2);
						this.controlPoint[i].attr({'path' : 
							'M' + (pointX)+ ',' +(pointY)+ 'L'+ (pointX + 8) + ',' + (pointY) +
				            'L'+ (pointX + 8) + ',' +(pointY + 8) + 'L'+ (pointX) + ','+ (pointY + 8) +
				            'L'+ (pointX) + ','+ (pointY) + 'Z',
						});
					}
					else if(i == 6) {
						pointX += dX;
						this.controlPoint[i].attr({'path' : 
							'M' + (pointX)+ ',' +(pointY)+ 'L'+ (pointX + 8) + ',' + (pointY) +
				            'L'+ (pointX + 8) + ',' +(pointY + 8) + 'L'+ (pointX) + ','+ (pointY + 8) +
				            'L'+ (pointX) + ','+ (pointY) + 'Z',
						});
					}
					else if(i == 7) {
						pointX += dX;
						this.controlPoint[i].attr({'path' : 
							'M' + (pointX)+ ',' +(pointY)+ 'L'+ (pointX + 8) + ',' + (pointY) +
				            'L'+ (pointX + 8) + ',' +(pointY + 8) + 'L'+ (pointX) + ','+ (pointY + 8) +
				            'L'+ (pointX) + ','+ (pointY) + 'Z',
						});
					}
					
					this.controlPoint[i].attr({
						 'fill' : '#A2BEE0', 
						 'fill-opacity' : '100',
						 'stroke' : '#000000',
						 'stroke-width' : '1'
					});
				}
				
				var controlBox = document.getElementById('controlBox');
				
				var cx =  controlBox.getBoundingClientRect().left-220;
				var cy =  controlBox.getBoundingClientRect().top-100;
				var w = controlBox.getBoundingClientRect().width;
				var h = controlBox.getBoundingClientRect().height;
				
				this.drawShape(cx, cy, w, h, selectedContent, event);
			},
			
			
			drawShape : function(cx, cy, w, h, selectedContent, event) {
				var wDivide2 = parseInt(w)/2;
				
				if(selectedContent.tagName === 'ellipse') {
					var hRadius = parseInt(w)/2;
					var vRadius = parseInt(h)/2;
					
					$(selectedContent).attr({
						'cx' : cx + hRadius,
						'cy' : cy + vRadius,
						'rx' : hRadius,
						'ry' : vRadius,
					});
				}
				else if($(selectedContent).attr('class') === 'rect') {
					$(selectedContent).attr({
						'd' :
						'M' + (cx) + ',' + (cy) +
						'L' + (cx+w) + ',' + (cy) +
						'L' + (cx+w) + ',' + (cy+h) +
						'L' + (cx) + ',' + (cy+h) +
						'L' + (cx) + ',' + (cy) + 'Z'
					});
				}
				
				if($(selectedContent).attr('class') === 'triangle') {											
					$(selectedContent).attr({
						'd' : 
						'M' + (cx) + ',' + (cy+h) + 
						'L' + (cx+wDivide2) + ',' + (cy) +
						'L' + (cx+w) + ',' + (cy+h) +
						'L' + (cx) + ',' + (cy+h) + 'Z'
					});
				}
				else if($(selectedContent).attr('class') === 'pentagon') {
					var cWidth1_5 = w/5;		//컨트롤박스 너비의 1/5 크기
					var cHeight1_5 = h/5;		//컨트롤박스 높이의 1/5 크기
					
					$(selectedContent).attr({
						'd' : 
						'M' + (cx) + ',' + (cy+cHeight1_5*2) + 
						'L' + (cx+wDivide2) + ',' + (cy) +
						'L' + (cx+w) + ',' + (cy+cHeight1_5*2) +
						'L' + (cx+(cWidth1_5*4)) + ',' + (cy+h) +
						'L' + (cx+cWidth1_5) + ',' + (cy+h) + 
						'L' + (cx) + ',' + (cy+cHeight1_5*2) + 'Z'
					});
				}
				else if($(selectedContent).attr('class') === 'hexagon') {	
					var cWidth1_4 = (w)/4;		//가이드라인 너비의 1/4 크기
					var cHeight1_2 = (h)/2;		//가이드라인 높이의 1/2 크기
					
					$(selectedContent).attr({
						'd' : 
						'M' + (cx+cWidth1_4) + ',' + (cy) + 
						'L' + (cx+(cWidth1_4*3)) + ',' + (cy) +
						'L' + (cx+w) + ',' + (cy+cHeight1_2) +
						'L' + (cx+(cWidth1_4*3)) + ',' + (cy+h) +
						'L' + (cx+cWidth1_4) + ',' + (cy+h) + 
						'L' + (cx) + ',' + (cy+cHeight1_2) + 
						'L' + (cx+cWidth1_4) + ',' + (cy) +	'Z'
					});
				}
			},
			
			
			handlePointDrop : function(x, y, event) {
				this.modifyThumbnailView();		
			},
			
			modifyThumbnailView : function() {
				var slide_svg_children = $('#slide_svg').children().clone().get();
				var thumbnailController = this.mainController.getThumbnailController();
				thumbnailController.reflectThumbnail(slide_svg_children);
			}
			
	};
	
	return SlideEditorView;
	

});